@import '../../css/global.less';

.equip {
    text-align: left;
    padding: 8px;
    background-color:#132221;
    max-width: 500px;
    margin: auto;
    position: relative;

    .has-break {
        white-space: pre-wrap;
    }

    &.empty-equip {
        text-align: center;
        font-size: 28px;
        .icon {
            position: absolute;
            color: @base-color;
            font-size: 36px;
            opacity: 0.6;
            top: 40%;
            left: 0;
            width: 100%;
        }
        div {
            position: absolute;
            margin-top: 24px;
            color:#FF8000;
            opacity: 0.6;
            top: 45%;
            left: 0;
            width: 100%;
        }
        p.placeholder {
            height: 16px;
            border-radius: 8px;
            opacity: 0.12;
        }
    }

    >li {
        display: block;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 20px;
        >.right {
            float: right;
        }
        >span {
            color: #8FBC8F;
        }
    }
    >li.equip-name {
        display: inline;
        color:#F12Cf1;
        &.rare {
            color:#FF8000;
        }
        .star {
            color: #FF0;
        }
    }

    >li.basic-info {
        color:#F2F2F2;
        &.extension {
            opacity: 0.7;
        }
    }
    >li.plus-info {
        color:#00c848;
    }
    >li.enhance {
        color:#00BFFF;
    }
    >li.quality {
        color:#FFFF00;
    }
    >li.score {
        color:#FF8000;
    }
    >li.inactive > span {
        color:#9b9b9b;
    }
    >li.hole-active > span {
        color:#00c848;
    }
}

.slot {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    vertical-align: text-bottom;
    display: inline-block;
    margin-right: 4px;
}
